{extend name="$index_style_layout" /}
{block name="nav"}{/block}
{block name="body_content"}
<div class="BigsortBox">
	<div class="BoxIn">
		<ul>
			<ol><div><span>
{php}$menu_choose=config('system_dirname')?config('system_dirname'):'index';{/php}
{volist name="'wap'|get_web_menu" id="rs"}
			<a href="{$rs.url}" {if ($rs['activate']==$menu_choose||$rs['activate']==$menu_choose.'-'.$fid)}class="ck"{/if}>{$rs.name}</a>
{/volist}</span></div></ol>
			<li><span>更多</span></li>
		</ul>
	</div>
</div>
<!--弹出更多导航菜单-->
<div class="MoreSorts">
	<div class="BackBox" onClick="HiddenMoreSorts()"></div>
{volist name="'wap'|get_web_menu" id="rs"}
<dl>
			<dt><a href="{$rs.url}">{$rs.name}</a><span></span></dt>
					<dd>
	{notempty name="rs.sons"}
			{volist name="rs.sons" id="vs"}
					<a href="{$vs.url}">{$vs.name}</a>
			{/volist}				
	{/notempty}
	</dd>
</dl>		
{/volist}
	<div class="exit"><span onClick="HiddenMoreSorts()">关闭</span></div>
</div>
<script type="text/javascript">
<!--
$('.MoreSorts dl dt span').click(function(){
	var thisobj=$(this).parent().parent();
	thisobj.siblings('dl').removeClass('ck');
	if(thisobj.hasClass('ck')){
		thisobj.removeClass('ck');
	}else{
		thisobj.addClass('ck');
	}
});
function HiddenMoreSorts(){
	$('.MoreSorts').fadeOut();
}
$('.BigsortBox .BoxIn ul li').click(function(){
	var scrollTopH=parseInt($(window).scrollTop());
	$('.MoreSorts').css({'top':scrollTopH+'px'});
	$('.MoreSorts').fadeIn();
});
//统计总宽度
//var mysortBoxW=0;
//$('.BigsortBox ul ol div a').each(function(){
	//mysortBoxW+=$(this).width();
//});
var mysortBoxW=$('.BigsortBox ul ol div span').width()+30;
$('.BigsortBox ul ol div').width(mysortBoxW);
var myScroll; 
myScroll = new IScroll('.BigsortBox ul ol', { scrollX: true, scrollY: false, mouseWheel: true,preventDefault: false,preventDefaultException: { tagName: /^(INPUT|TEXTAREA|BUTTON|SELECT|LI)$/ } });
//-->
</script>
<link rel="stylesheet" type="text/css" href="__STATIC__/index/toutiao/wapindex.css">
<div class="MainContainerBox">
	<div class="MainSlideBox">
<!--幻灯片开始-->
<link href="__STATIC__/libs/owlcarousel/css/owl.carousel.css" rel="stylesheet">
<link href="__STATIC__/libs/owlcarousel/css/owl.theme.css" rel="stylesheet">
<link href="__STATIC__/libs/owlcarousel/css/owl.transitions.css" rel="stylesheet">
<script src="__STATIC__/libs/owlcarousel/js/owl.carousel.js"></script>
<style type="text/css">
#owl-demo { width: 100%; margin-left: auto; margin-right: auto;background:#fff;}
#owl-demo .item{ display: block;}
#owl-demo img { display: block; width: 100%;}
</style>
<script type="text/javascript">
$(function(){
	$('#owl-demo').owlCarousel({
		items: 1,
		autoPlay: 3000,  //播放时间间隔
		autoHeight: false,	//如果不想自适应高度就把true改成false
		transitionStyle: 'fade'
	});
});
</script>
{qb:tag name='wap_index_rollpic2' val='listdb' type="images"}
	<!--
	<div id="owl-demo" class="owl-carousel">			
		<a class="item"><img src="__STATIC__/images/1.jpg" /></a>
		<a class="item"><img src="__STATIC__/images/2.jpg" /></a>
		<a class="item"><img src="__STATIC__/images/3.jpg" /></a>
		<a class="item"><img src="__STATIC__/images/4.jpg" /></a>
	</div>
	-->
	<!--上面的是演示数据，演示数据可有可无，有的话，必须以注释的形式紧跟在标签后面，下面的就是模板-->
	<div id="owl-demo" class="owl-carousel">			
	{volist name="listdb" id="rs"}
		<a class="item" href="{$rs.url}"><img src="{$rs.picurl}"></a>
	{/volist}
	</div>
{/qb:tag}
<!--幻灯片结束-->
	</div>
	<div class="ListConts">
{qb:tag name="news_list_page_listdata01" type="cms" rows="10" order="id" by="desc" mid="-1"}
{if $rs.mid==3&&($mvdb=json_decode($rs.mv_url,true)[0])}
	<ul class="pic_word">
		<li><div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
		<p style="margin-top:8px;">{:fun('Player@play',$mvdb.url,'100%',230,$rs.picurl)}</p>
	<dl class="moreinfo"><dt>浏览:<span>{$rs.view}</span>次 评论:<span>{:fun('comment@total',$rs['id'],'cms')}</span>条</dt><dd>{$rs.create_time|date="Y-m-d",###}</dd></dl>
	</li>
	</ul>
{elseif count($rs['picurls'])>2}
	<div class="ListMorpic">
	<div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
	<a href="{$rs.url}"><ul>
	<a href="{$rs.url}">
	{volist name="$rs.picurls" id="pic"}
	{if ($i<4)}
		<li><span><img src="{$pic.picurl}" style="max-width: 100%; max-height: 100%;"></span></li>
	{/if}
	{/volist}
	</a>
	</ul>
	</a>
	<dl class="moreinfo"><dt>浏览:<span>{$rs.view}</span>次 评论:<span>{:fun('comment@total',$rs['id'],'cms')}</span>条</dt><dd>{$rs.create_time|date="Y-m-d",###}</dd></dl>
	</div>	
{elseif $rs['picurl']!='' /}
	<ul class="pic_word">
		<ol><a href="{$rs.url}"><span><img src="{$rs.picurl}"></span></a></ol>
		<li><div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
	<dl class="moreinfo"><dt>浏览:<span>{$rs.view}</span>次 评论:<span>{:fun('comment@total',$rs['id'],'cms')}</span>条</dt><dd>{$rs.create_time|date="Y-m-d",###}</dd></dl>
	</li>
	</ul>
{else /}
	<ul class="pic_word">
		<li><div class="title"><a href="{$rs.url}">{$rs.title}</a></div>
		<p>{$rs.content|get_word=94}</p>
	<dl class="moreinfo"><dt>浏览:<span>{$rs.view}</span>次 评论:<span>{:fun('comment@total',$rs['id'],'cms')}</span>条</dt><dd>{$rs.create_time|date="Y-m-d",###}</dd></dl>
	</li>
	</ul>
{/if}
{/qb:tag} 

	</div>
<script type="text/javascript">
var Mpage = 1;
//显示更多
function ShowMoreList(){
	Mpage++;
	$.get('{qb:url name="news_list_page_listdata01" /}'+Mpage,function(res){
		if(res.code==0){
			if(res.data==''){
				layer.msg("已经显示完了！",{time:500});
			}else{
				$('.ListConts').append(res.data);
				scroll_get = true;  //这一行仅仅是匹配滚动显示更多.如果没使用滚动特效,可以删除
			}
		}else{
			layer.msg(res.msg,{time:2500});
		}
	});
}

//滚动显示更多
var scroll_get = true;	//做个标志,不要反反复复的加载
$(document).ready(function () {
	$(window).scroll(function () {
		if (scroll_get==true &&  (400 + $(window).scrollTop())>($(document).height() - $(window).height())) {
			scroll_get = false;
			layer.msg('内容加截中,请稍候',{time:1000});
			ShowMoreList();
		}
	});
});

</script>
</div>
{/block}